<!--
 * @Author: cjy
 * @Date: 2020-09-16 14:51:11
 * @LastEditors: Please set LastEditors
 * @Descripttion: 
 * @LastEditTime: 2023-04-24 18:06:32
 * @FilePath: \vue-openlayers-demos\src\views\firstMap\FirstMap.vue
-->
<template>
  <div class="vm">
    <h2 class="h-title">加载天地图底图</h2>
    <div id="map" class="map-x"></div>
    <div class="explain">
      <p>
        Map：地图容器，核心部分，可加载各类地图与功能控件，用于渲染、表现动态地图。
      </p>
      <p>target：目标元素</p>
      <p>
        layers：图层，包含多个调用数据的子类，由子类的实例加载地图数据，必须结合图层数据源匹配使用。
      </p>
      <p>
        view：地图视图，控制地图缩放等基本交互，以及地图投影坐标系、地图中心点、分辨率、旋转角度等。
      </p>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileImage from "ol/source/TileImage";
import ImageLayer from 'ol/layer/Image';
import XYZ from "ol/source/XYZ";
import TileDebug from 'ol/source/TileDebug';
import { Logo, TileSuperMapRest } from "@supermap/iclient-ol";
import * as control from "ol/control";
import * as olInteraction from 'ol/interaction'
import DragRotateAndZoom from 'ol/interaction/DragRotateAndZoom'


import TileGrid from 'ol/tilegrid/TileGrid';
import { fromLonLat } from "ol/proj";
import * as olProj from 'ol/proj';
import {Raster as RasterSource} from 'ol/source';


export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
    };
  },
  components:{
  },
  methods: {
    initMap() {
      // // 地图实例
      // this.map = new Map({
      //   controls: control.defaults({ zoom: false}),
      //   target: "map", // 对应页面里 id 为 map 的元素
      //   layers: [ // 图层
      //     new Tile({
      //       // source: new OSM() // OSM图层数据源
      //       source: new XYZ({
      //         url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
      //         projection: "EPSG:4326",
      //       }),
      //     }),
      //     new Tile({
      //       source: new XYZ({
      //         url: 'http://t6.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
      //         projection: "EPSG:4326",
      //       })
      //     })

      //   ],
      //   view: new View({ // 地图视图
      //     projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      //     center: [110.064839, 32.548857], // 深圳坐标
      //     // minZoom:10, // 地图缩放最小级别
      //     zoom: 5 // 地图缩放级别（打开页面时默认级别）
      //   })
      // })
      // // console.log(this.map.getSize());
      // this.map.on('click',(evt)=>{
      //   console.log(evt);
      //   console.log(evt.coordinate);
      //   console.log(evt.pixel);
      // })


      
      //坐标参考系
      let projection = olProj.get("EPSG:3857");
      //分辨率
      let resolutions = [];
      for (var i = 0; i < 19; i++) {
          resolutions[i] = Math.pow(2, 18 - i);
      }
      let tilegrid = new TileGrid({
          origin: [0, 0],
          resolutions: resolutions
      });
      //拼接百度地图出图地址
      let baidu_source = new TileImage({
          crossOrigin: "anonymous",
          //设置坐标参考系
          // projection: "EPSG:3857",
          projection: projection,
          //设置分辨率
          tileGrid: tilegrid,
          //出图基地址
          tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            //  openlayers6的版本
            let z = tileCoord[0];
            let x = tileCoord[1];
            let y = -tileCoord[2] - 1;
            if (x < 0) x = "M" + (-x);
            if (y < 0) y = "M" + (-y);
            let num = Math.ceil(Math.random() * 3);//https://maponline2.bdimg.com/pvd/
            return (
              "http://maponline" +
              num +
              ".bdimg.com//onlinelabel/?qt=vtile&x=" +
              x +
              "&y=" +
              y +
              "&z=" +
              z +
              "&styles=pl&udt=&scaler=1&p=0"
              // "&styles=pl&scaler=1&udt=&p=0"
            );//

            // if (!tileCoord) {
            //     return "";
            // }
            // let z = tileCoord[0];
            // let x = tileCoord[1];
            // let y = -tileCoord[2] - 1;

            // if (x < 0) {
            //     x = "M" + (-x);
            // }
            // if (y < 0) {
            //     y = "M" + (-y);
            // }
            
            // return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
            // return "http://online3.map.bdimg.com/onlinelabel/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20200211&scaler=1&p=0";
          }
      });
      //百度地图
      let baidu_layer = new Tile({
          source: baidu_source,
      });
      //
      //定义颜色转换方法
      let reverseFunc = function (pixelsTemp) {
        //
        for (var i = 0; i < pixelsTemp.length; i += 4) {
          var r = pixelsTemp[i];
          var g = pixelsTemp[i + 1];
          var b = pixelsTemp[i + 2];

          pixelsTemp[i] = r + 10;
          pixelsTemp[i + 1] = g + 11;
          pixelsTemp[i + 2] = b + 17;

          // //运用图像学公式，设置灰度值
          // var grey = r * 0.3 + g * 0.59 + b * 0.11;
          // //将rgb的值替换为灰度值
          // pixelsTemp[i] = grey;
          // pixelsTemp[i + 1] = grey;
          // pixelsTemp[i + 2] = grey;

          // //基于灰色，设置为蓝色，这几个数值是我自己试出来的，可以根据需求调整
          // pixelsTemp[i] = 55 - pixelsTemp[i];
          // pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
          // pixelsTemp[i + 2] = 305 - pixelsTemp[i + 2];
          // pixelsTemp[i] = 100 - pixelsTemp[i];
          // pixelsTemp[i + 1] = 255 - pixelsTemp[i + 1];
          // pixelsTemp[i + 2] = 300 - pixelsTemp[i + 2];
        }
      };
      //openlayer 像素转换类，可以直接当做source使用
      const raster = new RasterSource({
        sources: [
          //传入图层，这里是天地图矢量图或者天地图矢量注记
          baidu_layer,
        ],
        //这里设置为image类型，与官方示例不同，优化速度
        operationType: "image",
        operation: function (pixels, data) {
          //执行颜色转换方法，注意，这里的方法需要使用lib引入进来才可以使用
          reverseFunc(pixels[0].data);
          return pixels[0];
        },
        //线程数量
        threads: 10,
        //允许operation使用外部方法
        lib: {
          reverseFunc: reverseFunc,
        },
      });
      //创建新图层，注意，必须使用 ImageLayer
      let layer = new ImageLayer({
        name: "天地图矢量图层",
        source: raster,
      });





       
      this.map = new Map({
        target: "map", 
        layers: [
          layer,
          // // 高德地图
          // new Tile({
          //   source: new XYZ({
          //   // source: new TileDebug({
          //     url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          //     projection: "EPSG:3857",
          //   }),
          //   opacity: .6
          // }),
        ],
        view: new View({
          // projection: "EPSG:4326",
          projection: "EPSG:3857",
          center: fromLonLat([119.634072, 29.031330]),
          minZoom: 3,
          zoom: 5,
        }),
      });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
</style>